<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="shortcut icon" href="../img/logo.ico">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全部商品</title>
    <style>
        body {
            width: 1100px;
        }
        
        p {
            width: 290px;
            height: 40px;
            font-weight: bold;
            line-height: 40px;
            font-size: 14px;
        }
        
        i img {
            margin-left: 200px;
            display: block;
            height: 20px;
            width: 15px;
        }
        
        #man_product_1 {
            display: none;
        }
        
        #man_product_1ul {
            width: 290px;
            display: flex;
            flex-wrap: wrap;
        }
        
        #man_product_1ul li {
            width: 40px;
            border: 1px solid gray;
            text-align: center;
            margin-right: 4px;
        }
        
        .jiantou_list {
            background-image: url(/img/箭头.png);
            background-size: 15px 20px;
            width: 15px;
            height: 20px;
            display: inline-block;
            margin-top: 20px;
            margin-left: 50px;
        }
        
        #product_img {
            height: 2250px;
            width: 1058px;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
        }
        
        section {
            display: flex;
            margin-top: 50px;
        }
        
        .product_box {
            width: 33.33%;
            height: 527px;
        }
        
        .product_box img {
            width: 313px;
            height: 440px;
        }
        
        #product_img:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
            overflow: hidden;
        }
        
        span {
            width: 200px;
            display: inline-block;
            text-align: right;
        }
    </style>
</head>

<body>
    <header></header>
    <section>


        <div id="product">
            <span>首页/新品推荐</span>
            <div id="product_left">
                <div id="man_product">
                    <div>
                        <p>男装</p>
                    </div>
                    <div>
                        <div>男士下装
                            <i class="jiantou_list">
                                <!-- <img src="../img/箭头.png" alt=""> -->
                            </i>
                            <div id="man_product_1">
                                <ul id="man_product_1ul">
                                    <li>短裤</li>
                                    <li>短裤</li>
                                    <li>短裤</li>
                                    <li>短裤</li>
                                    <li>短裤</li>
                                    <li>短裤</li>
                                </ul>
                            </div>
                        </div>
                        <div>男士上装<i class="jiantou_list"></i>
                            <div id="man_product_1">
                                <ul id="man_product_1ul">
                                    <li>短裤</li>
                                    <li>短裤</li>
                                    <li>短裤</li>
                                    <li>短裤</li>
                                    <li>短裤</li>
                                    <li>短裤</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="women_product">
                    <p>
                        女装
                    </p>
                    <div>女士上装<i class="jiantou_list"></i>
                        <div id="man_product_1">
                            <ul id="man_product_1ul">
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                            </ul>
                        </div>
                    </div>
                    <div>女士下装<i class="jiantou_list"></i>
                        <div id="man_product_1">
                            <ul id="man_product_1ul">
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="parts_product">
                    <p>配件
                    </p>
                    <div>包装<i class="jiantou_list"></i>
                        <div id="man_product_1">
                            <ul id="man_product_1ul">
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                            </ul>
                        </div>
                    </div>
                    <div>其他<i class="jiantou_list"></i>
                        <div id="man_product_1">
                            <ul id="man_product_1ul">
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="shoes_product">
                    <p>鞋类 </p>
                    <div>鞋类<i class="jiantou_list"></i>
                        <div id="man_product_1">
                            <ul id="man_product_1ul">
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                                <li>短裤</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="chlidren_product">
                    <p>童装</p>
                    <div>童装<i class="jiantou_list"></i>
                        <div id="man_product_1">
                            <ul id="man_product_1ul">
                                <li>毛衫</li>
                                <li>短袖</li>
                                <li>帽子</li>
                                <li>凉鞋</li>
                                <li>短裤</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="color_choice">
                    <p>颜色</p>
                    <div>颜色<i class="jiantou_list"></i>
                        <div id="man_product_1">
                            <ul id="man_product_1ul">
                                <li>红色</li>
                                <li>绿色</li>
                                <li>彩色</li>
                                <li>黄色</li>
                                <li>黑色</li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div id="product_right"></div>
        </div>
        <div id="product_img">
            <div class="product_box"><img src="../img/prouduct_1.jpg" alt="">
                <p>Dickies男士精品裤子</p>
                <p>DK008703<span>￥799</span></p>
                <p></p>
            </div>
            <div class="product_box"><img src="../img/prouduct_2.jpg" alt="">
                <p>Dickies男士精品裤子</p>
                <p>DK008703<span>￥799</span></p>
                <p></p>
            </div>
            <div class="product_box"><img src="../img/prouduct_3.jpg" alt="">
                <p>Dickies男士精品裤子</p>
                <p>DK008703<span>￥799</span></p>
                <p></p>
            </div>
            <div class="product_box"><img src="../img/prouduct_4.jpg" alt="">
                <p>Dickies男士精品裤子</p>
                <p>DK008703<span>￥799</span></p>
                <p></p>
            </div>
            <div class="product_box"><img src="../img/prouduct_5.jpg" alt="">
                <p>Dickies男士精品裤子</p>
                <p>DK008703<span>￥799</span></p>
                <p></p>
            </div>
            <div class="product_box"><img src="../img/prouduct_6.jpg" alt="">
                <p>Dickies男士精品裤子</p>
                <p>DK008703<span>￥799</span></p>
                <p></p>
            </div>
        </div>
    </section>
    <footer></footer>
</body>


</html>

<script src="jQuery.js"></script>
<script>
    $("footer").load("footer.html");
    $("header").load("header.html");
    var i = 1;
    $("p").css({
        fontSi
    })
    $(".jiantou_list").click(function() {

            if (i % 2 == 1) {
                $(this).css({
                    backgroundImage: "url(../img/箭头上.png)"

                });
                $(this).next().css({
                    "display": "block"
                });
                i++;
            } else {
                $(this).css({
                    backgroundImage: "url(../img/箭头.png)"

                });
                $(this).next().css({
                    "display": "none"
                });
                i = i + 1
            }


        })
        // $(".change_jiantou").focus(function() {
        //     $("#man_product_1").css({
        //         "display": "none",

    //     })
    //     $(this).css({
    //         backgroundImage: "url(../img/箭头.png)",
    //     });
    //     $(this).addClass("jiantou_list");
    //     $(this).removeClass("change_jiantou");


    // });
</script>